<div>
  <div class="section gf-form-group">
    <h5 class="section-heading">选项</h5>

    <gf-form-switch
      class="gf-form"
      label="星标"
      label-class="width-9"
      checked="ctrl.panel.starred"
      on-change="ctrl.refresh()"
    ></gf-form-switch>
    <gf-form-switch
      class="gf-form"
      label="最近浏览的"
      label-class="width-9"
      checked="ctrl.panel.recent"
      on-change="ctrl.refresh()"
    ></gf-form-switch>
    <gf-form-switch
      class="gf-form"
      label="搜索"
      label-class="width-9"
      checked="ctrl.panel.search"
      on-change="ctrl.refresh()"
    ></gf-form-switch>

    <gf-form-switch
      class="gf-form"
      label="显示标题"
      label-class="width-9"
      checked="ctrl.panel.headings"
      on-change="ctrl.refresh()"
    ></gf-form-switch>

    <div class="gf-form">
      <span class="gf-form-label width-9">最多项目</span>
      <input
        class="gf-form-input max-width-5"
        type="number"
        ng-model="ctrl.panel.limit"
        ng-model-onblur
        ng-change="ctrl.refresh()"
      />
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">搜索</h5>

    <div class="gf-form">
      <span class="gf-form-label width-6">查询</span>
      <input
        type="text"
        class="gf-form-input"
        placeholder="标题查询"
        ng-model="ctrl.panel.query"
        ng-change="ctrl.refresh()"
        ng-model-onblur
      />
    </div>

    <div class="gf-form">
      <folder-picker
        initial-folder-id="ctrl.panel.folderId"
        on-change="ctrl.onFolderChange"
        label-class="width-6"
        initial-title="'All'"
        enable-reset="true"
      >
      </folder-picker>
    </div>

    <div class="gf-form">
      <span class="gf-form-label width-6">标签</span>
      <bootstrap-tagsinput
        ng-model="ctrl.panel.tags"
        tagclass="label label-tag"
        placeholder="添加标签"
        on-tags-updated="ctrl.refresh()"
      >
      </bootstrap-tagsinput>
    </div>
  </div>
</div>
